/**
 * Created by Delicate on 2018/1/3.
 */
import React from 'react';
import {
    StyleSheet,
    View,
    Text,
    FlatList,
    ActivityIndicator
} from 'react-native';

import NavBar from '../../components/NavBarView'
import NoData from '../../components/ListHasNoDataView'
import LoadedAll from '../../components/ListLoadedAllView'
import Item from '../../components/DemandListItemView'
import DemandService from '../../services/Demand'

let _self = null;

class Views extends React.Component {

    constructor(props) {
        super(props);
        _self = this;
        this._loadLock = false;
        this.state = {
            list: [],
            type: '00',
            pageSize: 10,
            pageNumber: 1,
            refreshing: false,
            pulling: false,
            lastPage: false
        }
    }

    componentWillMount() {

    }

    async componentDidMount() {
        _self.refresh();
    }

    async refresh() {
        if (!_self._loadLock && !_self.state.refreshing) {
            _self._loadLock = true;
            _self.setState({
                refreshing: true
            });
            const {result, message, data} = await DemandService.list({
                params: {
                    type: _self.state.type,
                    pageSize: _self.state.pageSize,
                    pageNumber: 1,
                }
            });
            const page = data.list;
            if (result) {
                _self.setState({
                    list: page.list,
                    pageNumber: 1,
                    lastPage: page.lastPage,
                });
            } else {
                Toast.show(message);
            }
            setTimeout(()=>{
                _self._loadLock = false;
                _self.setState({
                    refreshing: false
                });
            },layout.REFRESH_DELAY_TIME);
        }
    }

    async pull(pageNumber) {
        if (!_self._loadLock && !_self.state.pulling && !_self.state.lastPage && pageNumber && pageNumber !== this.state.pageNumber) {
            _self._loadLock = true;
            _self.setState({
                pulling: true
            });
            const {result, message, data} = await DemandService.list({
                params: {
                    type: _self.state.type,
                    pageSize: _self.state.pageSize,
                    pageNumber
                }
            });
            const page = data.list;
            if (result) {
                _self.setState({
                    list: [
                        ..._self.state.list,
                        ...page.list
                    ],
                    pageNumber: page.pageNumber,
                    lastPage: page.lastPage
                });
            } else {
                Toast.show(message);
            }
            setTimeout(()=>{
                _self._loadLock = false;
                _self.setState({
                    pulling: false
                });
            },1500)
        }
    }

    skip(params) {
        _self.props.navigation.navigate('DemandDetail', params)
    }

    render() {
        return (
            <View style={base.baseOuter}>
                <NavBar host={this} title="我的需求"/>
                <FlatList
                    onRefresh={() => this.refresh()}
                    onEndReached={() => this.pull(this.state.pageNumber + 1)}
                    onEndReachedThreshold={0.5}
                    refreshing={this.state.refreshing}
                    style={styles.container}
                    keyExtractor={(item: ItemT, index: number) => index}
                    renderItem={({item}) => {
                        return (
                            <View style={styles.item}>
                                <Item onPress={() => this.skip({
                                    id: item.id,
                                    item: item
                                })} item={item}/>
                            </View>
                        )
                    }}
                    ListHeaderComponent={() => {
                        if (this.state.list.length === 0) {
                            return (
                                <View>
                                    <NoData/>
                                </View>
                            )
                        } else {
                            return (<View/>)
                        }
                    }}
                    ListFooterComponent={() => {
                        if (this.state.lastPage && this.state.list.length > 0) {
                            return (
                                <LoadedAll/>
                            )
                        } else {
                            return (
                                <View>
                                    <ActivityIndicator animating={this.state.pulling}/>
                                </View>
                            )
                        }
                    }}
                    data={this.state.list}/>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    item: {
        paddingTop: layout.GAP_VERTICAL_MID
    },
})

//路由
const DemandList = {
    screen: Views,
    navigationOptions: {
        header: null,
    },
    name: 'DemandList',
    sign: true
};

export default DemandList;